import{_ as k}from"./index.vue_vue_type_style_index_0_lang2.js";import{d as u,e as y,r as h,P as g,Q as _,$ as s,X as a,R as e,S as i,K as o,aE as r,a4 as c,a2 as N,a5 as f}from"./elementPlusModules.js";const v=e("p",null,"通用 column-type 属性设置特殊列",-1),x=e("p",null,"column-type 子项可设置为对象形式，用于扩展自定义插槽与列宽",-1),b=e("p",null,"可选 index 序号列，expand 展开行操作列，handle 自定义操作列",-1),J=e("p",null,"选中列可分为 selection / multiple 类型，当分页禁用时仅允许使用 selection",-1),L=e("p",null,"展开行可通过具名插槽 expand 实现渲染内容",-1),w=e("p",null,"通过 handles 属性设置自定义操作按钮下拉菜单项",-1),P=e("p",null,"通过 handler-click 函数监听自定义操作按钮点击事件，返回是否刷新表单的状态",-1),M={style:{display:"flex"}},C=u({__name:"ColumnType",setup(B){const m=y(`
<template>
  <div style="height: 70vh">
    <MerakXTable
      :columns-by-store="JSON.parse(JSON.stringify(state.columns))"
      :columns="state.columns"
      :data="state.data"
      :pagination="false"
      :column-type="['index', 'selection', 'expand', { type: 'handle', width: 300, slot: 'handler' }]"
      :handles="[{ type: 'delete', text: '删除' }]"
      :handler-click="handleHanlerClick"
    >
      <template #expand="{ row }">
        <div>{{ row.description }}</div>
      </template>
      <template #handler="{ row }">
        <div style="display: flex;">
          <el-button>查看详情</el-button>
          <el-button>删除 {{ row.name }}</el-button>
        </div>
      </template>
    </MerakXTable>
  </div>
</template>

<script setup lang="ts">
import { reactive } from "vue";

import MerakXTable, { MerakXTableInstance, MerakXTableColumn } from "../../../../../components/MerakXTable";

const state = reactive<{
  columns: MerakXTableColumn[];
  data: any[];
}>({
  columns: [
    { field: "name", title: "Name" },
    { field: "age", title: "Age" },
    { field: "address", title: "Address" }
  ],
  data: [
    {
      id: "1",
      name: "John Brown",
      age: 32,
      address: "New York No. 1 Lake Park",
      description: "My name is John Brown, I am 32 years old, living in New York No. 1 Lake Park."
    },
    {
      id: "2",
      name: "Jim Green",
      age: 42,
      address: "London No. 1 Lake Park",
      description: "My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park."
    },
    {
      id: "3",
      name: "Not Expandable",
      age: 29,
      address: "Jiangsu No. 1 Lake Park",
      description: "This not expandable"
    },
    {
      id: "4",
      name: "Joe Black",
      age: 32,
      address: "Sydney No. 1 Lake Park",
      description: "My name is Joe Black, I am 32 years old, living in Sydney No. 1 Lake Park."
    }
  ]
});

const handleHanlerClick:MerakXTableInstance['handlerClick'] = async ({type, params}) => {
  console.log(type, params)
  return false
};
<\/script>
`),n=h({columns:[{field:"name",title:"Name"},{field:"age",title:"Age"},{field:"address",title:"Address"}],data:[{id:"1",name:"John Brown",age:32,address:"New York No. 1 Lake Park",description:"My name is John Brown, I am 32 years old, living in New York No. 1 Lake Park."},{id:"2",name:"Jim Green",age:42,address:"London No. 1 Lake Park",description:"My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park."},{id:"3",name:"Not Expandable",age:29,address:"Jiangsu No. 1 Lake Park",description:"This not expandable"},{id:"4",name:"Joe Black",age:32,address:"Sydney No. 1 Lake Park",description:"My name is Joe Black, I am 32 years old, living in Sydney No. 1 Lake Park."}]}),p=async({type:t,params:d})=>(console.log(t,d),!0);return(t,d)=>(g(),_(f,null,[v,x,b,J,L,w,P,s(o(k),{"columns-by-store":JSON.parse(JSON.stringify(n.columns)),columns:n.columns,data:n.data,pagination:!1,"column-type":["index","selection","expand",{type:"handle",width:300,slot:"handler"}],handles:[{type:"delete",text:"删除"}],"handler-click":p},{expand:a(({row:l})=>[e("div",null,i(l.description),1)]),handler:a(({row:l})=>[e("div",M,[s(o(r),null,{default:a(()=>[c("查看详情")]),_:1}),s(o(r),null,{default:a(()=>[c("删除 "+i(l.name),1)]),_:2},1024)])]),_:1},8,["columns-by-store","columns","data"]),N(t.$slots,"default",{html:m.value})],64))}});export{C as _};
